/**
 * 无限级侧边导航栏
 */

import UIconfont from '@@/UIconfont.vue'
import { ElMenu, ElMenuItem, ElSubMenu } from 'element-plus'
import { defineComponent, h, VNode } from 'vue'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: 'Menus',
  setup() {
    const router = useRouter()

    function select(index: string) {
      router.push(index)
    }

    return { select }
  },
  render() {
    function common(menu: VuexSidebarItem): () => VNode[] {
      return () => [h(UIconfont, { name: menu.icon, class: 'menu-icon' }), h('span', null, menu.title)]
    }
    function create(menu: VuexSidebarItem): VNode {
      if (menu.children) {
        return h(ElSubMenu, { index: menu.router }, { title: common(menu), default: () => menu.children!.map(create) })
      }
      return h(ElMenuItem, { index: menu.router }, common(menu))
    }
    const defaultOpeneds = this.$store.getters.assideOpends
    return h(ElMenu, { defaultOpeneds, onSelect: this.select, style: 'border: none' }, () =>
      this.$store.state.aside.map(create)
    )
  },
})
